.commentListWrapper {
  display: flex;
  flex-direction: column;
  .commentHeader {
    color: var(--text-third-color);
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
    .commentHeaderCount {
      padding: 0 4px;
    }
  }
  .commentMain {
    .commentItemMain {
      margin-bottom: 12px;
    }
    .commentItem {
      display: flex;
      .avatarBox {
        flex-shrink: 0;
      }
      .commentRight {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        word-break: break-all;
        .commentContent {
          display: flex;
          flex-direction: column;
          .author {
            color: var(--text-third-color);
            font-size: 12px;
          }
          .commentDesc {
            color: var(--text-color);
            font-size: 12px;
            margin-top: 4px;
          }
          .commentArea {
            font-size: 12px;
            margin-top: 4px;
            margin-bottom: 4px;
            color: var(--text-third-color);
          }
          .iconWrapper {
            display: flex;
            .iconItem {
              display: flex;
              align-items: center;
              font-size: 12px;
              margin-right: 16px;
              span {
                color: var(--text-secondary-color);
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
    .repliesWrapper {
      // margin-top: 8px;
      .commentItem {
        padding: 8px 0;
        &:last-of-type {
          padding-bottom: 0;
        }
        .replyText {
          margin-right: 4px;
        }
        .replyName {
          color: var(--text-third-color);
          margin-right: 4px;
        }
      }
    }
  }
}
